<template>
    <section id="search-wrapper">
        <el-row class="search-wrapper-row">
            <el-row style="margin-bottom: 10px">
                <el-button
                    size="mini"
                    type="primary"
                    v-for="(item, index) in source"
                    @click="changeSource(item.name)"
                    :key="index"
                    :style="
                        `background:${item.color};border-color:${item.color}`
                    "
                    >{{ item.name }}</el-button
                >
            </el-row>
            <el-input
                :placeholder="searchbarStyle.placeholder"
                :class="searchbarStyle.className"
                v-model="searchValue"
                clearable
            >
                <el-button
                    @click="submit"
                    slot="append"
                    icon="el-icon-search"
                ></el-button>
            </el-input>
        </el-row>
    </section>
</template>

<script>
export default {
    data: () => ({
        baseUrl: 'https://www.baidu.com/s?ie=UTF-8&wd=',
        searchValue: '',
        searchbarStyle: {
            className: 'baidu',
            placeholder: '百度一下，你就知道',
        },
        source: [
            {
                name: '百度',
                color: '#2932E1',
            },
            {
                name: '必应',
                color: '#0c8484',
            },
            {
                name: '搜狗',
                color: '#FF6F17',
            },
            {
                name: '谷歌',
                color: '#4285F4',
            },
            {
                name: 'NPM',
                color: '#EA4335',
            },
        ],
    }),
    methods: {
        changeSource(name) {
            const actions = new Map([
                [
                    '百度',
                    () => {
                        this.baseUrl = 'https://www.baidu.com/s?ie=UTF-8&wd='
                        this.searchbarStyle = {
                            className: 'baidu',
                            placeholder: '百度一下，你就知道',
                        }
                    },
                ],
                [
                    '必应',
                    () => {
                        this.baseUrl =
                            'https://cn.bing.com/search?FORM=BESBTB&q='
                        this.searchbarStyle = {
                            className: 'bing',
                            placeholder: '必应搜索',
                        }
                    },
                ],
                [
                    '搜狗',
                    () => {
                        this.baseUrl = 'https://www.sogou.com/web?query='
                        this.searchbarStyle = {
                            className: 'sougou',
                            placeholder: '搜狗搜索',
                        }
                    },
                ],
                [
                    '谷歌',
                    () => {
                        this.baseUrl = 'https://www.google.com/search?q='
                        this.searchbarStyle = {
                            className: 'google',
                            placeholder: 'Google Search',
                        }
                    },
                ],
                [
                    'NPM',
                    () => {
                        this.baseUrl = 'https://www.npmjs.com/search?q='
                        this.searchbarStyle = {
                            className: 'npm',
                            placeholder: 'Search Packages',
                        }
                    },
                ],
            ])
            actions.get(name)()
        },
        submit() {
            const url = this.baseUrl + this.searchValue
            window.open(url)
        },
    },
}
</script>

<style lang="scss">
#search-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
    width: 100%;
}
.search-wrapper-row {
    width: 40%;
}

$sources-color: (
    baidu: #2932e1,
    bing: #0c8484,
    sougou: #ff6f17,
    google: #4285f4,
    npm: #ea4335,
);

$source-list: baidu bing sougou google npm;

@each $source in $source-list {
    .#{$source} {
        .el-input-group__append,
        input {
            border-color: map-get($sources-color, $source);
            &:hover {
                border-color: map-get($sources-color, $source);
            }
        }
        .el-icon-search {
            color: map-get($sources-color, $source);
            &:hover {
                border-color: map-get($sources-color, $source);
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .search-wrapper-row {
        width: 90%;
    }
}
</style>
